<div class="alert alert-danger alert-sm" *ngIf="tipShow && invalid">
  <div class="alert-items">
    <div class="alert-item static" role="alert">
      <div class="alert-icon-wrapper">
        <clr-icon class="alert-icon" shape="exclamation-circle"></clr-icon>
      </div>
      <span class="alert-text">
          {{message}}
      </span>
  </div>
  </div>
  <button type="button" class="close" aria-label="Close" (click)="closeTip()">
    <clr-icon aria-hidden="true" shape="close"></clr-icon>
  </button>
</div>
<div class="alert alert-success alert-sm" role="alert" *ngIf="tipShow && !invalid">
  <div class="alert-items">
    <div class="alert-item static">
      <div class="alert-icon-wrapper">
        <clr-icon class="alert-icon" shape="check-circle"></clr-icon>
      </div>
      <span class="alert-text">
          {{message}}
      </span>
    </div>
  </div>
  <button type="button" class="close" aria-label="Close" (click)="closeTip()">
    <clr-icon aria-hidden="true" shape="close"></clr-icon>
  </button>
</div>
